<template>
  <button
    ref="_ref"
    class="ff-button"
    :class="{
      [`ff-button--${type}`]: type,
      [`ff-button--${size}`]: size,
      'is-plain': plain,
      'is-round': round,
      'is-circle': circle,
      'is-disabled': disabled,
      'is-loading': loading,
    }"
    :disabled="disabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
  >
    <Icon icon="spinner" spin v-if="loading" />
    <Icon :icon="icon" v-if="icon" />
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script setup lang="ts">
import type { ButtonProps } from "./type";
import { ref, onMounted } from "vue";
import Icon from "../Icon/Icon.vue";
defineOptions({
  name: "FFButton",
});

const props = withDefaults(defineProps<ButtonProps>(), {
  nativeType: "button",
});
//打印props
onMounted(() => {
  // console.log(toRaw(props), 'props')
});
const _ref = ref<HTMLButtonElement>();
defineExpose({
  ref: _ref,
});
</script>

<style lang="scss" scoped></style>
